<template>
  <yt-page title="选择检查内容" flex>
    <yt-form>
      <yt-sticky top="0px">
        <yt-cell label="检查内容" value="保存">
          <yt-btn @click="doAdd" :disabled="!this.content" :plain="!this.content" size="mini">
            添加
          </yt-btn>
        </yt-cell>
        <yt-textarea type="column" v-model="content">
        </yt-textarea>
        <yt-split></yt-split>
        <div class="content-title">库存内容</div>
      </yt-sticky>
      <div class="content-wrap">
        <div class="row" v-for="(item, index) in filterContentList" :key="index">
          <span class="row-index">{{ index + 1 }}</span>
          <p class="row-content">{{ item.check_content }}</p>
          <i class="row-btn yt-icon yt-icon-plus" @click="(e) => doAdd(e, item)"></i>
        </div>
      </div>
    </yt-form>
    <yt-shopCart ref="cart">
      <div class="icon" :class="getClass" :style="`background-image: url(${url})`" @click="doShow" @animationend.self="doEnd" @mozAnimationend.self="doEnd" @msAnimationend.self="doEnd" @oAnimationend.self="doEnd" @webkitAnimationend.self="doEnd">
        <yt-badge class="badge" :class="{'badge-scale': play}" v-if="list.length" :value="list.length"></yt-badge>
      </div>
      <div class="info">
        <div class="logo-content">
          <div class="logo-desc">
            共添加<span class="logo-num" :class="{'is-highlight': list.length}">{{ list.length }}</span>条检查内容
          </div>
          <yt-btn @click="onSave" class="logo-btn" edge :class="list.length ? 'enough' : 'not-enough'">确定</yt-btn>
        </div>
      </div>
    </yt-shopCart>
    <yt-popup v-model="show" slot="alert">
      <div class="select">
        <yt-sticky class="select-title" top="0px">
          <div>
            以下为已选内容
            <span class="select-title-btn" @click="onClear"><i class="yt-icon yt-icon-clear"></i>清空</span>
          </div>
        </yt-sticky>
        <ul>
          <li class="row" v-for="(item, index) in list" :key="index">
            <span class="row-index">{{ index + 1 }}</span>
            <p class="row-content">{{ item }}</p>
            <i class="row-btn yt-icon yt-icon-reduce" @click="(e) => onRemove(index)"></i>
          </li>
        </ul>
      </div>
    </yt-popup>
  </yt-page>
</template>

<script>
import { EVENTS, BUS } from '@/store'
import { commonApi } from '@/common/api/commonApi.js'

export default {
  data() {
    return {
      contentList: [],
      content: '',
      list: [],
      url: require('./common/box.png'),
      play: false,
      show: false
    }
  },
  computed: {
    filterContentList() {
      return this.contentList.filter(
        item => this.list.indexOf(item.check_content) === -1
      )
    },
    active() {
      return !!this.list.length
    },
    getClass() {
      return this.play ? 'is-play' : this.active ? 'is-active' : 'is-default'
    }
  },
  async created() {
    this.contentList = await commonApi.search('law_content')
  },
  activated() {
    this.list = this.$route.query.data || []
  },
  methods: {
    onSave() {
      this.$router.$back()
      BUS.$emit(EVENTS.lawProgrammeContent, this.list)
    },
    onRemove(index) {
      this.list.splice(index, 1)
      if (this.list.length === 0) {
        this.show = false
      }
    },
    onClear() {
      this.list = []
      this.show = false
    },
    doShow() {
      this.show = true
    },
    doEnd() {
      this.play = false
    },
    doAdd(e, item) {
      this.play = true
      this.$refs.cart.start(e.target)
      if (item) {
        this.list.push(item.check_content)
      } else {
        this.list.push(this.content)
        this.content = ''
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.content
  &-title
    line-height 36px
    font-size 14px
    background-color #fff
    padding 0 10px
    border-bottom 1px solid #f1f1f1

  &-wrap
    background-color #fff

.row
  display flex
  align-self center
  padding 8px 0
  line-height 22px
  font-size 14px

  &-index
    text-align center
    width 30px

  &-content
    flex 1

  &-btn
    font-size 24px
    color #46baff
    margin 2px 10px 0 5px

.select
  height 300px
  overflow auto

  &-title
    text-align center
    color #666
    line-height 40px
    font-size 14px
    border-bottom 1px solid #f1f1f1
    background-color #fff

    &-btn
      position absolute
      right 10px
      padding 0 10px

  &-row
    font-size 14px
    line-height 36px
    padding 0 10px

    &-icon
      color #666
      padding 0 10px
      float right

.icon
  position absolute
  bottom 5px
  left 5px
  width 100px
  height 96px
  background-repeat no-repeat

  &.is-default
    background-position 0 0

  &.is-active
    background-position 0 -96px

  &.is-play
    animation cart-play 0.6s steps(1)

.num
  position absolute
  bottom 50px
  right 15px

.info
  margin-left 100px
  flex 1

.logo
  width 100%
  height 100%
  border-radius 50%
  text-align center
  background #2b343c

  &.is-highlight
    background rgb(0, 160, 220)

    .logo-icon
      color #fff

  &-icon
    line-height 44px
    font-size 26px
    color #80858a

  &-badge
    top 5px
    left 80%

  &-content
    width 100%
    height 100%
    display flex

  &-num
    position relative
    top -2px
    display inline-block
    vertical-align middle
    margin 0 5px
    font-size 32px

    &.is-highlight
      color yellow

  &-desc
    line-height 48px
    font-size 14px
    flex 1

  &-btn
    flex 0 0 105px
    width 105px

    &.not-enough
      color #cccccc
      border 1px solid #2c3c4d
      background #2c3c4d

    &.enough
      color #ffffff
      border 1px solid #00b43c
      background #00b43c

.badge
  position absolute
  top 35px
  left 75px
  transform translate3d(0, 0, 0)

  &-scale
    animation yt-shake 0.3s ease 0.3s

@keyframes cart-play
  0%
    background-position 0 -96px

  5%
    background-position 0 -192px

  10%
    background-position 0 -288px

  15%
    background-position 0 -385px

  20%
    background-position 0 -576px

  80%
    background-position 0 -576px

  85%
    background-position 0 -385px

  90%
    background-position 0 -288px

  95%
    background-position 0 -192px

  100%
    background-position 0 -96px
</style>
